<template>
    <div class="user">
        <!--<div class="user-dept">
            <yl-depts-tree v-model:value="selectedNodeKeys" sreachAble></yl-depts-tree>
        </div>-->
        <div class="user-data" v-if="!opeModels">
            <div class="public-filter">
                <div style="display: flex">
                    <custom-filter
                        :selectMerchant="selectMerchant"
                        :selectCurMerchant="selectCurMerchant"
                        @onSubmit="handleInitQuery"
                        @onSelect="handleSelectQuery"
                    ></custom-filter>
                </div>

                <div style="display: flex">
                    <div class="public-filter-item">
                        <a-button type="primary">下载绑定设备表</a-button>
                    </div>
                    <div class="public-filter-item">
                        <a-button type="primary">批量解绑</a-button>
                    </div>
                    <div class="public-filter-item">
                        <a-button type="primary">批量绑定</a-button>
                    </div>
                    <div class="public-filter-item">
                        <a-button type="primary" @click="handleSingleBinding">单个绑定</a-button>
                    </div>
                </div>
            </div>
            <div class="user-data__table">
                <a-table
                    :columns="columns"
                    :data-source="dataSource"
                    :row-key="setRowKey"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange"
                >
                    <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                        <span>{{ t(`yl.${item.slotName}`) }}</span>
                    </template>
                    <template #online="{ record }">
                        <span>{{ record.online == true ? t('yl.online') : t('yl.offline') }}</span>
                    </template>
                    <template #customAction="{ record }">
                        <a-button class="action-btn" size="small" @click="handUnbound(record)" :disabled="!record.templateNames">
                            <template #icon>
                                <PaperClipOutlined />
                            </template>
                        </a-button>

                        <a-button class="action-btn" size="small" @click="handEdit(record)" :disabled="!record.templateNames">
                            <template #icon>
                                <EditOutlined />
                            </template>
                        </a-button>
                        <a-button class="action-btn" type="danger" size="small" @click.stop="handissue(record)">
                            <template #icon>
                                <MenuOutlined />
                            </template>
                        </a-button>
                    </template>
                </a-table>
            </div>
        </div>

        <binding-model
            :visible="bindingModels"
            :loading="confirmLoading"
            :title="title"
            @cancle="handleCancle"
            @submit="handleSubmit"
        ></binding-model>

        <binding-operation
            v-if="opeModels"
            :loading="opeLoading"
            :title="opeTitle"
            :deviceCode="opeDeviceCode"
            :specsCode="opespecsCode"
            :tagRatioName="opetagRatioName"
            :priceIsLight="opePriceIsLight"
            :priceIsWater="opepriceIsWater"
            :tagColourName="opetagColourName"
            @submit="handleOpeSubmit"
        ></binding-operation>
        <distributionModel
            :visible="issueVisible"
            :loading="confirmLoading"
            :dept="distributionselectedRow"
            @cancle="distributionHandleCancle"
        ></distributionModel>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, onUnmounted, reactive, toRefs, ref, watch } from 'vue';
import { FieldTimeOutlined, HeartOutlined, MenuOutlined, DeleteOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
import customFilter from './components/tableFilter.vue';
import bindingModel from './components/bindingModel.vue';
import bindingOperation from './components/bindingOperation.vue';
import { putAppuntie } from '@/api/device/deviceApps';
import distributionModel from '@/components/distribution/distributionModel.vue';
import { useI18n } from 'vue-i18n';
import columns from './bindingColumns';
import apTables from './bindingTables';
//import useDeleteUser from './deleteUser';
import { message } from 'ant-design-vue';

// getAppsInfo

interface State {
    title: string;
    confirmLoading: boolean;
}

export default defineComponent({
    name: 'user',
    components: {
        bindingModel,
        customFilter,
        FieldTimeOutlined,
        HeartOutlined,
        MenuOutlined,
        bindingOperation,
        PaperClipOutlined,
        distributionModel,
    },

    setup() {
        const { t } = useI18n();
        let { selectedRow, selectModels, iniListData, tableQuery, visible } = apTables;
        const columnsList = ref<NormalObj[]>([]);
        const binding = reactive({
            title: computed(() => (selectedRow.value.id ? t('yl.editDeviceType') : t('yl.apAddForm'))),
            bindingModels: false,
            confirmLoading: false,
        });
        const distributionselectedRow = ref({});
        const issueVisible = ref(false);
        const operation = reactive({
            opeTitle: computed(() => (selectedRow.value.id ? t('yl.editDeviceType') : t('yl.apAddForm'))),
            opeModels: false,
            opeLoading: false,
            // 价签型号
            opespecsCode: '',
            opeDeviceCode: '',
            // 分辨率
            opetagRatioName: '',
            // 是否闪灯
            opePriceIsLight: '',
            // 是否防水
            opepriceIsWater: '',
            // 支持颜色
            opetagColourName: '',
        });

        // 设置table row key
        const setRowKey = (record: { [x: string]: any }) => record.id;
        onMounted(() => {
            iniListData(tableQuery);
        });
        onUnmounted(() => {});

        // 单个绑定
        const handleSingleBinding = () => {
            binding.bindingModels = true;
        };
        const handleCancle = () => {
            binding.bindingModels = false;
        };
        const handleSubmit = () => {
            iniListData(tableQuery);
            binding.bindingModels = false;
        };
        const handEdit = (item: any) => {
            console.log(item.specs);
            operation.opeDeviceCode = item.deviceCode;

            operation.opespecsCode = item.specs.seriesName + item.specs.tagMeasureName;

            // 分辨率
            operation.opetagRatioName = item.specs.tagRatioName;
            // 是否闪灯
            operation.opePriceIsLight = item.specs.priceIsLight;
            // 是否防水
            operation.opepriceIsWater = item.specs.priceIsWater;
            // 支持颜色
            operation.opetagColourName = item.specs.tagColourName;
            operation.opeModels = true;
        };
        const handleOpeSubmit = (type: string) => {
            if (type == 'submit') {
                iniListData(tableQuery);
            }
            operation.opeModels = false;
        };
        const handUnbound = (item: any) => {
            console.log(item);
            putAppuntie({ deviceCode: item.deviceCode }).then((res) => {
                iniListData(tableQuery);
            });
        };
        // 下发记录
        const handissue = (dict: { [x: string]: any }) => {
            console.log(dict);
            distributionselectedRow.value = dict;
            issueVisible.value = true;
        };
        // 下发记录
        const distributionHandleCancle = () => {
            issueVisible.value = false;
        };
        return {
            t,
            columns,
            ...toRefs(binding),
            ...toRefs(operation),
            columnsList,
            ...apTables,
            setRowKey,
            handleSingleBinding,
            handleCancle,
            handleSubmit,
            handEdit,
            handleOpeSubmit,
            handUnbound,
            handissue,
            distributionHandleCancle,
            distributionselectedRow,
            issueVisible,
        };
    },
});
</script>

<style lang="scss" scoped>
.user {
    @include flex;
    width: 100%;
    &-dept {
        flex-basis: 200px;
        min-width: 200px;
    }
    &-data {
        flex: 1;
        padding-left: $width20;
        &__filter {
            @include flex;
        }
        &__table {
            padding: $width20 $width0;
            .multi-action {
                background: $white;
            }
            .action-btn {
                margin-right: $width8;
            }
        }
    }
}
</style>
